<template>
  <div class="dashboard-editor-container" style="height: 950px">
    <el-row :gutter="10">  
      <el-col :span="16">
        <el-row :gutter="10">
          <el-col :span="6" style="font-size: 20px; font-weight: bold; text-align: center">
            <div class="first" style="height: 100px">
               <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
               
            "
            >委员总数</el-row
          >
           <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >128人</el-row
          >
            </div>
          </el-col>
          <el-col :span="6" style="font-size: 20px; font-weight: bold; text-align: center;height: 100px">
            <div class="second" style="height: 100px">
               <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >提案总数</el-row
          >
           <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >1200篇</el-row
          >
            </div>
          </el-col>
          <el-col :span="6" style="font-size: 20px; font-weight: bold; text-align: center;height: 100px">
            <div class="third" style="height: 100px">
               <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >会议次数</el-row
          >
           <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >560次</el-row
          >
            </div>
          </el-col>
          <el-col :span="6" style="font-size: 20px; font-weight: bold; text-align: center;height: 100px">
            <div class="first" style="height: 100px">
               <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >街道数量</el-row
          >
           <el-row
            style="
              font-size: 15px;
              font-weight: bold;
              text-align: center;
              color: #ffff;
            "
            >10</el-row
          >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11" class="bottom">
            <el-row style="font-size: 10px; font-weight: bold; text-align: left">
              提案办理进度
            </el-row>
            <el-row>
              <el-col :span="14">
              <div class="wrapper">
               <ProposalBar/>
               </div>
              </el-col>
              <el-col :span="10">
                <div class="wrapper">
                <Gauge/>
                </div>
              </el-col>
            </el-row>
          </el-col>
          
          <el-col :span="12" class="bottom">
            <el-row >
            <el-col style="font-size: 10px; font-weight: bold; text-align: left" >
              年份计划对比
              </el-col>
              <!-- <el-col :offset="8" >
                <div style="height:10px">
                <span class="demonstration">月</span>
               <el-date-picker
               v-model="monthdate"
                type="month"
                style="height:10px"
               placeholder="选择月">
               </el-date-picker>
               </div>
              </el-col> -->
            </el-row>
            <el-row>
              <el-col :span="10">
                <div class="wrapper">
                 <yearBarleft/>
                </div>
              </el-col>
              <el-col :span="4" style="height: 150px;">
              <el-row style="font-size: 5px; font-weight: bold; text-align: center">其他方面</el-row>
              <el-row style="font-size: 5px; font-weight: bold; text-align: center">人大方面</el-row>
              <el-row style="font-size: 5px; font-weight: bold; text-align: center">财政方面</el-row>
              <el-row style="font-size: 5px; font-weight: bold; text-align: center">环保方面</el-row>
              <el-row style="font-size: 5px; font-weight: bold; text-align: center">城镇建设</el-row>
              <el-row style="font-size: 5px; font-weight: bold; text-align: center">政协方面</el-row>
              </el-col>
              <el-col :span="10">
                 <div class="wrapper">
                 <yearBarright/>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>  
      </el-col>
      <el-col :span="8">
      <div class="bottom">  
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">排行榜</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">
         <el-col :span="8" >
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">第二名</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">姓名:孙建国</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">得分:97</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">界别:科技界别</el-row>
         </el-col>
         <el-col :span="8" >
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">第一名</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">姓名:张飞跃</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">得分:99</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">界别:教育界别</el-row>
         </el-col>
         <el-col :span="8" >
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">第三名</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">姓名:mairui</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">得分:96</el-row>
         <el-row style="font-size: 10px; font-weight: bold; text-align: left">界别:政协委员</el-row>
         </el-col>
         </el-row>
         <el-row>
           <el-table
          height="145"
          ref="table">
          <el-table-column
            header-align="left"
            prop="id"
            label="排名"
          />
          <el-table-column
            header-align="left"
            prop=""
            label="界别"
          />
          <el-table-column
            header-align="left"
            prop=""
            label="姓名"
          />
          <el-table-column
            header-align="left"
            prop=""
            label="得分"
          />
          </el-table>
         </el-row>
      </div>
      </el-col>
    </el-row>
    <el-row :gutter="10"> 
      <el-col :span="8" style="height: 170px;">
      <div class="bot">
      <el-row style="font-size: 10px; font-weight: bold; text-align: left">
              委员党派
            </el-row>
            <el-row>
        <div class="chart-wrapper">
           <PartiesPie/>
        </div>
        </el-row>
        </div>
      </el-col>
      <el-col :span="8" style="height: 170px;">
      <div class="bot">
      <el-row style="font-size: 10px; font-weight: bold; text-align: left">
              界别人数分布
            </el-row>
            <el-row>
        <div class="chart-wrapper">
           <PeopleBar/>
        </div>
        </el-row>
        </div>
      </el-col>
      <el-col :span="8" style="height: 170px;">
      <div class="bot">
      <el-row style="font-size: 10px; font-weight: bold; text-align: left">
              委员学历
            </el-row>
            <el-row>
        <div class="chart-wrapper">
           <EducationPie/>
        </div>
        </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      
      <el-col :span="12">
      <div class="thirdbottom">
      <el-row style="font-size: 10px; font-weight: bold; text-align: left">
       男女比例分析
      </el-row>
      <el-row>
        
        <el-col :span="5" :offset="3">
         <div class="chart-wrapper">
           <MaleGauge/>
        </div>
        </el-col>
        <el-col :span="4" :offset="2" style="font-size: 25px; font-weight: bold; text-align: center">
         男女
        </el-col>
        <el-col :span="5" :offset="2">
         <div class="chart-wrapper">
           <FeMaleGauge/>
        </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="3">
         <div class="chart-wrapper">
           <MaleBar/>
        </div>
        </el-col>
        <el-col :span="4" :offset="2" style="font-size: 25px; font-weight: bold; text-align: center;margin-bottom: 0px;margin-top:20px">
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">科学技术界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">文艺艺术界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">社会科学界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">经济界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">农业界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">教育界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">体育</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">医疗卫生界</el-row>
         <el-row style="font-size: 8px; font-weight: bold; text-align: center">其他界</el-row>
        </el-col>
        <el-col :span="5" :offset="3">
         <div class="chart-wrapper">
           <FemaleBar/>
        </div>
        </el-col>
      </el-row>
      </div>
      </el-col>
      <el-col :span="12">
      <div class="bottom">
       <el-row style="font-size: 10px; font-weight: bold; text-align: left">
       会议分布
      </el-row>
      <el-row>
        <div class="chart-wrapper">
           <MeetLine/>
        </div>
      </el-row>
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProposalBar from '@/views/dashboard/BarChart'
import Gauge from '@/views/dashboard/Gauge'
import yearBarleft from '@/views/dashboard/yearBarChartleft'
import yearBarright from '@/views/dashboard/yearBarChartright'
import PartiesPie from '@/views/dashboard/PieChart'
import PeopleBar from '@/views/dashboard/PeopleBar'
import EducationPie from '@/views/dashboard/EducationPie'
import MaleGauge from '@/views/dashboard/MaleGauge'
import FeMaleGauge from '@/views/dashboard/FemaleGauge'
import MaleBar from '@/views/dashboard/MaleBar'
import FemaleBar from '@/views/dashboard/FemaleBar'
import MeetLine from '@/views/dashboard/meetline'
export default {
  name: "index",
  components: {ProposalBar,Gauge,yearBarleft,yearBarright,PartiesPie,PeopleBar,EducationPie,MaleGauge,FeMaleGauge,MaleBar,FemaleBar,MeetLine},
  data() {
    return {
      // 版本号
      version: "1.0.0",
      monthdate:""
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 8px;
  background-color: rgb(240, 242, 245);
  position: relative;
  
  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }
  }
.bottom{
   padding: 8px;
  background: #fff;
  position: relative;
   margin-left: 10px; 
  // margin-right: 20px
}
.thirdbottom{
  //  padding: 8px;
  background: #fff;
  position: relative;
   margin-left: 3px; 
  // margin-right: 20px
}
.bot{
  //  padding: 8px;
  background: #fff;
  margin-top:-5px
  // position: relative;
  //  margin-left: 10px; 
  // margin-right: 20px
}
.el-table{
  margin: auto;
  text-align: center;
}
.el-row {
  margin-bottom: 10px;
  
}
.chart-wrapper {
    background: #fff;
    padding: 0 0 0;
    // margin-bottom: 32px;
  }
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 70px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.demo-table-expand .el-form-item__content {
  font-size: 12px;
}
.first{
   background: -webkit-linear-gradient(left, #2F57E8,#bfcbf7);
    padding-top:20px
}
.second{
   background: -webkit-linear-gradient(left, #f33207,#edb2a1);
    padding-top:20px
}
.third{
   background: -webkit-linear-gradient(left, #8107f3,#cbaef0);
    padding-top:20px
}
</style>

